<template>
	<view class="chat_view">
		<view class="chat_data">
			<scroll-view class="chat_body" scroll-y="true">
				<!-- 别人的 v-if="msg.userId != user.userId" -->
				<uni-row  class="chat_each" v-for="(msg,index) in chat_value" :key="index">
					<uni-col v-if="msg.userId != user.userId" :span="24">
						<uni-col :span="4">
							<view class="chat_item_title">
								<text>{{msg.userName.substr(0,1)}}</text>
							</view>
						</uni-col>
						<view class="chat_item_body">
							<uni-col :span="1">
								<view class="chat_body_jie"></view>
							</uni-col>
							<uni-col :span="15">
								<view class="chat_body_text">
									<text>{{msg.userMsg}}</text>
								</view>
							</uni-col>
						</view>
					</uni-col>
					<uni-col v-else :span="24">
						<uni-col :span="15" :offset="4">
							<view class="chat_body_text_my">
								<text>{{msg.userMsg}}</text>
							</view>
						</uni-col>
						<uni-col :span="1">
							<view class="chat_body_jie_my"></view>
						</uni-col>
						<uni-col :span="4" >
							<view class="chat_item_title_my">
								<text>{{msg.userName.substr(0,1)}}</text>
							</view>
						</uni-col>
					</uni-col>
				</uni-row>
				<view style="height: 70rpx;"></view>
			</scroll-view>
		</view>
		<view class="chat_input">
			<uni-row>
				<uni-col :span="20">
					<uni-easyinput v-model="value" placeholder="请输入内容" @input="isflag"></uni-easyinput>
				</uni-col>
				<uni-col :span="4">
					<button size="mini" :disabled="flag" type="primary" @click="sendMsg(value)">发送</button>
				</uni-col>
			</uni-row>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				chatHeight: 1200,
				user: {},
				flag: true,
				value: "",
				chat_value:[],
				socketTask:null,
				is_open_socket: false
			}
		},
		onShow() {
			this.$myRequest({
				url: "/selSomeChat",
				method: "GET",
				success: res => {
					if(res.data.code == 200){
						console.log(res.data.message)
						this.chat_value = res.data.message
					}
					console.log(this.chat_value)
				}
			})
		},
		onLoad() {
			this.user = uni.getStorageSync("loginUser")
			this.connectSocketInit();
		},
		beforeDestroy() {
			this.closeSocket();
		},
		methods: {
			isflag() {
				if (this.value.length == 0) {
					this.flag = true
					return
				}
				this.flag = false
			},	
			connectSocketInit() {
				this.socketTask = uni.connectSocket({
					url: "ws://192.168.31.222:8082/chat",
					success(data) {
						console.log("websocket连接成功");
					},
				})
				this.socketTask.onOpen(res=> {
					console.log("WebSocket连接正常打开中...！");
					this.is_open_socket = true;
					this.socketTask.onMessage(res=> {
						console.log("收到服务器内容：" + res.data);
						this.chat_value.push(JSON.parse(res.data))
						console.log(this.chat_value);
						this.chatHeight += 50
					});
				})
				this.socketTask.onClose(res=>{
					console.log("已经被关闭了")
				})
			},
			closeSocket() {
				this.socketTask.close({
					success(res) {
						this.is_open_socket = false;
						console.log("关闭成功", res)
					},
					fail(err) {
						console.log("关闭失败", err)
					}
				})
			},
			sendMsg(msg) {
				console.log(this.is_open_socket)
				if (this.is_open_socket) {
					var user = uni.getStorageSync("loginUser");
					this.socketTask.send({
						data: user.userPname+"&&"+msg+"&&"+this.user.userId,
						async success() {
							console.log("消息发送成功!");
						},
					});
					this.value = ""
					this.flag = true
				}
			}
						
			
		}
	}
</script>

<style lang="scss">
	.chat_view{	
		.chat_data{
			padding: 25rpx;
			height: 100%;
			.chat_body{
				height: 100%;
				.chat_each{
					margin: 30rpx;
					.chat_item_title{
						width: 100rpx;
						height: 100rpx;
						box-sizing: border-box;
						border-radius: 50rpx;
						padding: 30rpx 35rpx;
						background: #5febed;
						color: #FFFFFF;
					}
					.chat_body_jie{
						width: 30rpx;
						height: 30rpx;
						margin-left: 18rpx;
						margin-top: 20rpx;
						background: #b5b7b5;
						border-radius: 0 40rpx;
						
					}
					.chat_body_text{
						width: auto;
						height: auto;
						background: #b5b7b5;
						border-radius: 20rpx;
						padding: 15rpx;
						text{
							color: #FFFFFF;
							font-size: 30rpx;
						}
					}
					.chat_item_body{
						margin-top: 25rpx;
					}
					.chat_item_title_my{
						width: 100rpx;
						height: 100rpx;
						box-sizing: border-box;
						border-radius: 50rpx;
						padding: 30rpx 35rpx;
						background: #072a09;
						color: #FFFFFF;
					}
					.chat_body_jie_my{
						width: 30rpx;
						height: 30rpx;
						margin-left: -18rpx;
						margin-top: 50rpx;
						background: #007b23;
						border-radius: 40rpx 0;
						
					}
					.chat_body_text_my{
						height: auto;
						background: #007b23;
						border-radius: 20rpx;
						padding: 15rpx;
						margin-top: 30rpx;
						text-align: right;
						text{
							color: #FFFFFF;
							font-size: 30rpx;
						}
					}
				}
			}
		}
			
		.chat_input{
			width: 750rpx;
			padding: 25rpx;
			position: fixed;
			bottom: 0rpx;
			background: #fff;
			z-index: 16;
		}
		button{
			height: 65rpx;
			padding-top: 10rpx;
			padding-left: 18rpx;
			border-radius: 0 15rpx 15rpx 0;
		}
	}
</style>
